<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal" :form="form" @submit="handleSubmit">
        <div :class="advanced ? null: 'fold'">
          <a-row >
          <a-col :md="8" :sm="24" >
            <a-form-item
              label="授权状态"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <a-select 
			  v-decorator="[
				'status',
				]"
			  placeholder="请选择授权状态" :allowClear="true">
                <a-select-option value="ENABLE">成功</a-select-option>
                <a-select-option value="DISABLE">关闭</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24" >
            <a-form-item
              label="关键词搜索"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <a-input v-decorator="[
				'name',
				]"
		 placeholder="请输入名称或ID搜索" />
            </a-form-item>
          </a-col>
         <a-col :md="8" :sm="24" >
				<a-form-item
				label="创建时间范围"
				:labelCol="{span: 5}"
				:wrapperCol="{span: 18, offset: 1}"
				>
					<a-range-picker v-decorator="[
					'created_at',
					]" 
					:disabled-date="disabledDate"
					/>
            </a-form-item>
          </a-col>
        </a-row>
          <a-row v-if="advanced">
         
          <!-- <a-col :md="8" :sm="24" >
            <a-form-item
              label="推广目的"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <a-select v-decorator="[
				'landing_type',
				]"  placeholder="请选择">
                <a-select-option value="LINK">销售线索收集</a-select-option>
                <a-select-option value="APP">应用推广</a-select-option>
                <a-select-option value="DPA">商品目录推广</a-select-option>
                <a-select-option value="GOODS">商品推广</a-select-option>
                <a-select-option value="STORE">门店推广</a-select-option>
                <a-select-option value="AWEME">抖音号推广</a-select-option>
                <a-select-option value="SHOP">电商店铺推广</a-select-option>
                <a-select-option value="ARTICAL">头条文章推广</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->

          <!-- <a-col :md="8" :sm="24" > -->
            <!-- <a-form-item
              label="投放项目"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <a-select placeholder="请选择">
                <a-select-option value="1">关闭</a-select-option>
                <a-select-option value="2">运行中</a-select-option> -->
              <!-- </a-select>
            </a-form-item> -->
          <!-- </a-col> -->
         
        </a-row>
        </div>
        <span style="float: right; margin-top: 3px;">
          <a-button type="primary" @click="queryresult">查询</a-button>
          <a-button @click="btncancel" style="margin-left: 8px">重置</a-button>
          <a @click="toggleAdvanced" style="margin-left: 8px">
            {{advanced ? '收起' : '展开'}}
            <a-icon :type="advanced ? 'up' : 'down'" />
          </a>
        </span>
      </a-form>
    </div>
    <div>
      <div class="operator">
        <a-button @click="addNew" type="primary">新建</a-button>
        <!-- <a-button >批量操作</a-button> -->
        <a-dropdown>
          <a-menu @click="handleMenuClick" slot="overlay">
            <a-menu-item key="ENABLE" :disabled="selectedRows.length <= 0">启用</a-menu-item>
            <a-menu-item key="DISABLE" :disabled="selectedRows.length <= 0">暂停</a-menu-item>
          </a-menu>
          <a-button>
            更多操作 <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>

      <a-table
        :columns="columns"
        :dataSource="dataSource.list"
        :selectedRows.sync="selectedRows"
        @clear="onClear"
        :pagination="paginationOpt"
        :loading='tableloading'
       :row-selection="rowSelection"
      >

    <!-- 同步状态 -->
	  	<div slot="synchrondemo" slot-scope="text,record,index">
			<a-switch :checked="text.status == 'ENABLE' ? true : false" :loading="text.switchloading" @change="onChangedata(text.id,text.account_id,text.name,text.admin_id,index,$event)" />
		</div>

	<!-- 状态 -->
		<div slot="statusDemo" slot-scope="text">
           <span v-if="text =='ENABLE'">
                成功
            </span>
		   <span v-else>
               失败
           </span>
        </div>

      </a-table>

    </div>
  </a-card>
</template>

<script>
import {ACCOUNT,ACCOUNTEDIT} from '@/services/api'
// import StandardTable from '@/components/table/StandardTable'
import {ajaxparems} from '@/services/ajaxrequest'
import moment from 'moment';

const columns = [
    {
    title: '状态',
    scopedSlots: { customRender: 'synchrondemo' }
  },
{
    title: '账号ID',
    dataIndex: 'account_id'
  },
  {
    title: '广告投放账号',
    dataIndex: 'name'
  },
  {
    title: '授权状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'statusDemo' }
  },
   {
    title: '创建时间',
	dataIndex: 'created_at',
  },
  {
    title: '修改时间',
	dataIndex: 'updated_at',
  },
   {
    title: '所属公司',
	dataIndex: 'company',
  },

]

var dataSource = [];

export default {
  name: 'QueryList',
  // components: {StandardTable},
   created(){
			this.listNew();
	},
	beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  data () {
    return {
      advanced: false,
      columns: columns,
      dataSource:dataSource,
      selectedRows: [],
      tableloading:false,
      
      paginationOpt: {
			defaultCurrent: 1, // 默认当前页数
			defaultPageSize: 10, // 默认当前页显示数据的大小
			total: 0, // 总数，必须先有
			showSizeChanger: true,
			showQuickJumper: true,
			pageSizeOptions: ["5", "10", "15", "20"],
			showTotal: (total) => `共 ${total} 条`, // 显示总数
			onShowSizeChange: (current, pageSize) => {
				this.paginationOpt.defaultCurrent = 1;
				this.paginationOpt.defaultPageSize = pageSize;
				this.listNew(); //显示列表的接口名称
			},
			// 改变每页数量时更新显示
			onChange: (current, size) => {
				this.paginationOpt.defaultCurrent = current;
				this.paginationOpt.defaultPageSize = size;
				this.listNew();
			},
		},
    }
  },
  authorize: {
    deleteRecord: 'delete'
  },
  methods: {
	  moment,
      onstatus(v){
          console.log(v);
      },
    deleteRecord(key) {
      this.dataSource = this.dataSource.filter(item => item.key !== key)
      this.selectedRows = this.selectedRows.filter(item => item.key !== key)
	},
	queryresult(){
		this.listNew();
	},
	handleSubmit(res){
		console.log(res);
	},
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    remove () {
      this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
      this.selectedRows = []
    },
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onStatusTitleClick() {
      this.$message.info('你点击了状态栏表头')
    },
    onChange() {
    //   this.$message.info('表格状态改变了')
    },
    onSelectChange() {
      this.$message.info('选中行改变了')

    },
    addNew () {
		this.$router.push('/promotion/advering/addadver')
  },
  btncancel(){
    	//   重置
      	this.form.resetFields();
  },

//   editRecord(e){
//     this.$router.push({
//       path: '/promotion/advering/editaddver/',
//       query: {
//         ids: e,
//       }
//     })
//   },
	listNew() {
		this.tableloading = true;
		const { defaultCurrent, defaultPageSize } = this.paginationOpt;

		this.form.validateFieldsAndScroll((err, values) => {
			var paremslist = [];
			if(values['status'] !=undefined){
				paremslist.push({"field":'status',"operator":'EQUALS',"value":values['status']});
			}
			if(values['name'] !=undefined){
				paremslist.push({"field":'name',"operator":'LIKE',"value":values['name']});
			}
			if(values['created_at'] !=undefined){
				var time = moment(values['created_at'][0]).format('YYYY-MM-DD 00:00:00')
				var times = moment(values['created_at'][1]).format('YYYY-MM-DD 23:59:59')

				paremslist.push({"field":'created_at',"operator":'GREATER_EQUALS',"value":time});
				paremslist.push({"field":'created_at',"operator":'LESS_EQUALS',"value":times});
			}

				// ajaxparems(ACCOUNTURL,"").then((res) => {
				// 	console.log(res);
				// 	var result=res.data;
				// 	this.dataSource =result.data;
				// })
			var parems = {
				page:defaultCurrent,
				page_size:defaultPageSize,
				"filtering":paremslist
			};
			ajaxparems(ACCOUNT,parems).then((res) => {
				var result=res.data;
				if(result.code =="SUCCESS"){
					result.data.list.map(v=>{
						v.switchloading = false				
					});

					this.tableloading = false;
					this.dataSource =result.data;
					this.paginationOpt.total = result.data.page_info.total;
				}else{
					this.tableloading = false;
					this.$message.error(result.message, 3)
				}
			})
		});
	},

			//改变状态
	onChangedata(id,account_id,name,admin_id,index,e){
		// console.log(account_id);
		// console.log(name);
		this.dataSource.list[index].switchloading = true;
		//更改广告组状态
		var parems = {}
		if(e ==true){
			parems = {"id":id,"name":name,"admin_id":admin_id,"status":'enable'}
		}else{
			parems = {"id":id,"name":name,"admin_id":admin_id,"status":'disable'}
		}
		ajaxparems(ACCOUNTEDIT,parems).then((res) => {
			var result=res.data;

			if(result.code =="SUCCESS"){
				if(e ==true){
					this.dataSource.list[index].status = 'enable';
				}else{
					this.dataSource.list[index].status = 'disable';
				}
				this.dataSource.list[index].switchloading = false;
				this.$message.success(result.message,3);
			}else{
				this.$message.error(result.message,3);
			}
		})
	},

    handleMenuClick (e) {
		var account = [];
		this.selectedRows.forEach((res)=>{
			account.push(res.account_id);
		});
		console.log(ACCOUNTEDIT+e.key);
		// ajaxparems(ACCOUNTURL+e.key,parems).then((res) => {
		// 	var result=res.data;
		// 	this.dataSource =result.data;
		// })

		// /admin/ocean/account/
	


    }
  },computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
			this.selectedRows = selectedRows;
        //   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
      };
    },
  }
}
</script>

<style lang="less" scoped>
  .search{
    margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
